<template>
  <section class='f-meal-list'>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="overflow-y: auto;flex:1">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul class="f-goods-box">
          <li v-for="(item,index) in tableData" :key="index" @click="toDetail(item)">
            <img :src="item.image? item.image: defaultMealImg" alt="">
            <div class="f-text-box">
              <p class="f-name">{{item.packageName}}</p>
              <p class="f-mark">{{item.remark}}</p>
              <p class="f-price">CNY {{ (item.price/10/10).toFixed(2) }}</p>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from './api';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      condition: route.query.condition,

      searchForm: {
        "condition": route.query.condition, // 1-区域，2-全球，按洲或国家查传Null
        "continentCode": "", // 洲码
        "countryCode": "", // 国家码
        "orderBy": "",
        "page": 1,
        "serverEnum": null,
        "size": 10,
        "sortOrder": "DESC",
        "trafficEnd": "",
        "trafficStart": "",
        "typeEnum": null
      },

      loading: false,
      finished: false,
      refreshing: false,
      tableData: [],
      total: 0,

      defaultMealImg: require('@/assets/imgs/pic_package_default.png'),
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: route.query.title,
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });

      if (route.query.continentCode) {
        state.searchForm.continentCode = route.query.continentCode
      }
      if (route.query.countryCode) {
        state.searchForm.countryCode = route.query.countryCode
      }
    })

    const onLoad = () => {
      let json = JSON.parse(JSON.stringify(state.searchForm))

      if (state.refreshing) {
        state.tableData = [];
        state.refreshing = false;
      }

      api.yklPackListMore(json).then(res => {
        state.refreshing = false

        if (res.data.list.length) state.searchForm.page += 1
        state.tableData.push(...res.data.list)

        // 防止触发两次
        if (state.tableData.length >= res.data.total) {
          state.finished = true;
        } else {
          state.finished = false;
        }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.tableData.length < 10) {
          state.finished = true;
        }
      }).catch(err => {
        state.loading = false;
        state.finished = true;
        state.refreshing = false
      })
    };

    const onRefresh = () => {
      state.searchForm.page = 1

      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    const toDetail = (data) => {
      router.push({
        path: '/outChina/mealDetail',
        query: {
          packId: data.packageId
        }
      })
    }

    return {
      ...toRefs(state),
      onLoad,
      onRefresh,
      toDetail,
    }
  }
}
</script>

<style lang='scss' scoped>
.f-meal-list {
  display: flex;
  flex-direction: column;
  .f-goods-box {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 14px;
    li {
      width: 166px;
      border-radius: 7px;
      background: #fff;
      margin-bottom: 14px;
      img {
        width: 100%;
        border-radius: 7px;
      }
      .f-text-box {
        padding: 10px;
        .f-name {
          font-size: 14px;
          margin-left: 2px;
        }
        .f-mark {
          display: inline-block;
          background: #f3f3f3;
          color: #757575;
          padding: 2px 5px;
          font-size: 10px;
          margin: 10px 0;
          border-radius: 3px;
        }
        .f-price {
          font-size: 14px;
          font-weight: 550;
          color: #ff4b48;
          margin-left: 2px;
        }
      }
    }
    li:nth-child(2n) {
      margin-left: 14px;
    }
  }
}
</style>